<template>
  <div class="zt-m-swiper" :style="{paddingTop:swiperHeight+'%'}">
    <div class="zt-m-swiper__wrap"> 
      <mt-swipe ref="swiper" v-if="swiperList.length" :auto="hasVideo?0:4000" :show-indicators="false" @change="handleSwipeChange">
       <!--  <mt-swipe-item v-if="hasVideo"> 
          <div class="zt-swiper__item">
            <slot name="video" ></slot> 
          </div> 
        </mt-swipe-item> -->
        <slot name="video"  v-if="hasVideo"></slot>
        <mt-swipe-item v-for="item in swiperList" :key="item.id"> 
          <div class="zt-swiper__item">
            <img :src="item.link" alt=""> 
          </div> 
        </mt-swipe-item>
      </mt-swipe> 
    </div>   
    <div v-show="showPagi" class="zt-m-swiper__pagination">
      {{pageIndex + 1}}/{{swiperList.length + slotLength}}
    </div>
    <div class="zt-m-swiper__v-tool" v-if="hasVideo">
      <a :class="{'toggle-btn':true, 'activate':pageIndex < slotLength}" @click="toogleVideo" >视频</a>
      <a :class="{'toggle-btn':true, 'activate':pageIndex >= slotLength}"  @click="toogleSwiper">图片</a>
    </div>
    <slot name="float" :pageIndex="pageIndex"></slot>
  </div> 
</template>

<script>
/**
 * 带视频播放的轮播组件
 * {
 * swiperHeight:  number // 组件的高使用 设计图中测量的宽高百分比传值（如h/w=80%, 传80）
 * swiperList: Array // 轮播图片的数组 （数组的格式日后统一）
 * showPagi: boolean // 是否使用 自定义的分页显示
 * hasVideo：嵌套视频的开关
 * }
 */
export default {
  props: {
    swiperHeight: {
      type: Number,
      default: 100
    },
    swiperList: {
      type: Array,
      default() {
        return []
      }
    },
    slotLength: {
      type: Number,
      default: 0
    },
    showPagi: {
      type: Boolean,
      default: false
    },
    hasVideo: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      pageIndex: 0
    }
  },
  components: {
  },
  filters: {
  },
  computed: {
    showIndex () {
      return this.hasVideo ? this.pageIndex : this.pageIndex + 1
    }
  },
  methods: {
    handleSwipeChange (index) {
      this.pageIndex = index
      this.$emit('swiperChange', index)
    },
    toogleVideo () {
      if (this.pageIndex) {
        this.$refs.swiper.reInitPages(0)
      }
      this.$emit('toVideo')
    },
    toogleSwiper () {
      // this.$refs.swiper.reInitPages(3)
      this.$emit('toSwiper')
    }
  },
  mounted() {
  },
  created() {
  }
}
</script>
<style lang="scss" scoped>
.zt-m-swiper {
  width: 100%;
  height: 0%;
  position:relative;
  background:red;  
  &__wrap{
    position: absolute;
    left:0; right:0;top:0;bottom:0;
    .zt-swiper__item{
      height:100%;
      display: flex;
      align-items:center;
      justify-content:center;
      background:white;
      img{
        display:block;
        max-height:100%;
      }
    }  
  }
  
  // &__tool{
  //   position:absolute; 
  //   left:0%; bottom:15px;
  //   width:100%;
  //   text-align:center;  
  //   z-index:10;
  // }
  &__pagination{
    position:absolute; 
    right:15px; bottom:15px;
    padding:0 10px;
    color: white;
    border-radius:10px;
    background: rgba(0,0,0,0.5);
    z-index: 11;
  }
  &__v-tool{
    position: absolute;
    left:0; right:0; bottom:15px;
    text-align: center;
    z-index: 4;
    .toggle-btn{
      display: inline-block;
      line-height: 1.6;
      padding:0 10px;
      color: white;
      border-radius:12px;
      color:white;
      border:none;
      color:#333333;
      background: #eff3f8;
    }.activate{
      color:white;
      background: linear-gradient(right,#6dbcf8,#1689e0);
    }
  }
}
</style>